<template>
  <div class="ml-4 inspection-service">
    <h3 class="title">Inspection Service</h3>
    <v-card class="job-content">
      <div class="head">
        <v-icon class="icon" size="22">mdi-plus-thick</v-icon>
        <div class="head-icon">
          <v-icon class="icon" size="22" @click="openDeleteDialog">
            mdi-delete
          </v-icon>
          <v-icon class="icon" size="18">mdi-file-multiple</v-icon>
          <v-icon class="icon" size="25" @click="openEditJobSheetDialog">
            mdi-magnify
          </v-icon>
          <v-icon class="icon" size="22" @click="openSaveDialog">
            mdi-content-save
          </v-icon>
        </div>
      </div>
      <v-expansion-panels class="expansion-panels">
        <v-expansion-panel v-for="title in titleItem" :key="title.id">
          <v-expansion-panel-header class="panel-header">
            <Drag
              :dragItem="title"
              :enterItem.sync="titleEnterItem"
              :dragData.sync="titleItem"
            >
              <template #dragContent="{ dragEvent }">
                <v-row
                  no-gutters
                  class="panel-header-list"
                  @dragenter="dragEvent.dragenter"
                  @dragend="dragEvent.dragend"
                >
                  <v-col cols="2" class="panel-header-item">
                    <v-icon
                      size="18"
                      class="mr-2"
                      :draggable="true"
                      @dragstart="dragEvent.dragstart"
                      @dragover="dragEvent.dragover"
                      >mdi-drag-vertical</v-icon
                    >
                    <v-text-field
                      solo
                      hide-details
                      dense
                      class="white-input-17"
                      @click.stop
                    ></v-text-field>
                  </v-col>
                  <v-spacer></v-spacer>
                  <v-col cols="2" class="panel-header-item">
                    <span class="panel-header-title">Title</span>
                    <v-text-field
                      solo
                      hide-details
                      dense
                      class="white-input-17"
                      @click.stop
                    ></v-text-field>
                  </v-col>
                  <v-col cols="2" class="panel-header-icon">
                    <v-icon class="icon" @click.stop> mdi-delete </v-icon>
                    <v-icon class="icon" @click.stop> mdi-content-copy </v-icon>
                    <v-icon class="icon" @click.stop> mdi-plus-thick </v-icon>
                  </v-col>
                </v-row>
              </template>
            </Drag>
          </v-expansion-panel-header>
          <v-expansion-panel-content class="panel-content">
            <InputBox></InputBox>
            <MultipleChoice></MultipleChoice>
          </v-expansion-panel-content>
        </v-expansion-panel>
      </v-expansion-panels>
    </v-card>
    <EditJobSheet :show.sync="showEditJobSheetDialog"></EditJobSheet>
    <Delete :show.sync="showDeleteDialog"></Delete>
    <Save :show.sync="showSaveDialog"></Save>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import InputBox from "@/components/JobSheet/InputBox/InputBox.vue";
import Dialog from "@/components/Maintenance/Dialog/Dialog.vue";
import Delete from "@/components/JobSheet/Dialog/Delete.vue";
import Save from "@/components/JobSheet/Dialog/Save.vue";
import Drag from "@/components/JobSheet/Drag/Drag.vue";
import MultipleChoice from "@/components/JobSheet/MultipleChoice/MultipleChoice.vue";
import EditJobSheet from "@/components/JobSheet/Dialog/EditJobSheet.vue";
interface ITypeInput {
  text: string;
  serialNumber: number;
}
interface titleType {
  id: number;
  text: string;
  typeInput: Array<ITypeInput>;
}
@Component({
  components: {
    Dialog,
    Drag,
    Delete,
    Save,
    InputBox,
    MultipleChoice,
    EditJobSheet,
  },
})
export default class InspectionService extends Vue {
  showEditJobSheetDialog = false;
  showSaveDialog = false;
  showDeleteDialog = false;
  titleEnterItem: object | null = null;
  inputEnterItem: object | null = null;
  titleItem: Array<titleType> = [
    {
      id: 1,
      text: "title1",
      typeInput: [
        {
          text: "input",
          serialNumber: 1,
        },
        {
          text: "Single option",
          serialNumber: 2,
        },
      ],
    },
    {
      id: 2,
      text: "title2",
      typeInput: [
        {
          text: "input",
          serialNumber: 1,
        },
        {
          text: "Single option",
          serialNumber: 2,
        },
      ],
    },
    {
      id: 3,
      text: "title3",
      typeInput: [
        {
          text: "input",
          serialNumber: 1,
        },
        {
          text: "Single option",
          serialNumber: 2,
        },
      ],
    },
  ];

  openEditJobSheetDialog() {
    this.showEditJobSheetDialog = true;
  }
  openDeleteDialog() {
    this.showDeleteDialog = true;
  }
  openSaveDialog() {
    this.showSaveDialog = true;
  }
  removeItem(titleIndex: number, typeInputIndex: number) {
    this.titleItem[titleIndex].typeInput.splice(typeInputIndex, 1);
  }
}
</script>

<style lang="scss" scoped>
@import "@/components/JobSheet/InspectionService/InspectionService.scss";
</style>
